<template>
  <div class="imageText">
    <List item-layout="vertical">
        <ListItem v-for="item in list" :key="item.title">
            <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description" />
            {{ item.content }}
            <template slot="action">
                <li>
                    <Icon type="ios-star-outline" /> 123
                </li>
                <li>
                    <Icon type="ios-thumbs-up-outline" /> 234
                </li>
                <li>
                    <Icon type="ios-chatbubbles-outline" /> 345
                </li>
            </template>
            <template slot="extra">
                <img src="https://dev-file.iviewui.com/5wxHCQMUyrauMCGSVEYVxHR5JmvS7DpH/large" style="width: 280px">
            </template>
        </ListItem>
    </List>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data () {
    return {
      data: []
    };
  },
  watch: {
    // 当父组件该数据发生变化，子组件需要监听其变化重新赋值
    list: {
      handler(newVal, oldVal) {
        this.list = newVal;
      },
      deep: true,
      immediate: true
    }
  },
  methods: {

  }
};
</script>

<style lang="scss" scoped>
.imageText{
}
.ivu-list-vertical .ivu-list-item{
  text-align: left;
  padding: 1.25rem;
  background-color: #fff;
}
</style>
